<%--
  Created by IntelliJ IDEA.
  User: Tolean
  Date: 2018/6/5
  Time: 11:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="common/head.jspf"%>
    <link rel="Shortcut Icon" href="${lyon}/static/images/favicon.ico"  />
    <title>LYON</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--[if lte IE 8]><script src="${lyon}/static/assets/js/ie/html5shiv.js"></script><![endif]-->
    <script type="text/javascript" src="${lyon}/static/assets/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${lyon}/static/assets/css/login.css" />
    <!--[if lte IE 9]><link rel="stylesheet" href="${lyon}/static/assets/css/ie9.css" /><![endif]-->
    <!--[if lte IE 8]><link rel="stylesheet" href="${lyon}/static/assets/css/ie8.css" /><![endif]-->
    <noscript><link rel="stylesheet" href="${lyon}/static/assets/css/noscript.css" /></noscript>
</head>
<body class="is-loading">

<!-- Wrapper -->
<div id="wrapper">
    <!-- Main -->
    <section id="main">
        <header>
            <span class="avatar"><img style="width: 70px;" src="${lyon}/static/images/avatar.jpg" alt="" /></span>

        </header>

        <form method="post">
            <div class="field">
                <input type="text" name="username" id="username" placeholder="用户名(用于登陆)" />
            </div>
            <div class="field">
                <input type="password" name="password" id="password" placeholder="密码" />
            </div>
            <div class="field">
                <input type="password" name="r_password" id="r_password" placeholder="确认密码" />
            </div>
            <div class="field" style="float: left">
                <div class="field" style="display: inline-block">
                    <input type="text" name="code" id="code" placeholder="验证码" />
                </div>
                <ul class="actions" style="display: inline-block">
                    <img id="imgVerify" src="" alt="点击更换验证码"onclick="getVerify(this);">
                </ul>
            </div>
            <div class="field">
                <input type="text" name="nickname" id="nickname" placeholder="昵称(其他用户可见)" />
            </div>
            <div class="field">
                <textarea name="sign" id="sign" placeholder="座右铭" rows="3"></textarea>
            </div>
            <ul class="actions">
                <li><a class="button" onclick="signup()">注册</a></li>
            </ul>
            <div>
                <label id="msg" style="color: #00b7ee">今天又是轻松愉悦的一天呢.</label>
            </div>
        </form>
        <hr />
        <%--<footer>--%>
        <%--<ul class="icons">--%>
        <%--<li><a href="#" class="fa-twitter">Twitter</a></li>--%>
        <%--<li><a href="#" class="fa-instagram">Instagram</a></li>--%>
        <%--<li><a href="#" class="fa-facebook">Facebook</a></li>--%>
        <%--</ul>--%>
        <%--</footer>--%>
    </section>
</div>

<!-- Scripts -->
<!--[if lte IE 8]><script src="${lyon}/static/assets/js/ie/respond.min.js"></script><![endif]-->
<script>
    $(document.body).ready(function () {
        //首次获取验证码
        $("#imgVerify").attr("src","/onstage/getCode.do?"+Math.random());
    });
    function getVerify(obj){
        obj.src = "/onstage/getCode.do?"+Math.random();
    }
</script>
<script>
    if ('addEventListener' in window) {
        window.addEventListener('load', function() { document.body.className = document.body.className.replace(/\bis-loading\b/, ''); });
        document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
    }
    function signup() {
        if(checkPassword()&&checkForm()){
            checkUserName();
        }
    }
    function checkUserName() {
        var username=$("#username").val();
        $.get("${lyon}/onstage/checkUserName.do",{username:username},function (res) {
            if(res.success){
                checkCode();
            }else{
                document.getElementById("msg").innerText="用户名已存在";
            }
        },"json");
    }
    function checkCode() {
        var code=$("#code").val();
        if(code==null||code==''){
            document.getElementById("msg").innerText="验证输入错误";
        }else{
            code=code.toUpperCase();
            $.get("${lyon}/onstage/checkCode.do",{code:code},function (res) {
                if(res.success){
                    addUser();
                }else{
                    document.getElementById("msg").innerText="验证输入错误";
                }
            },"json");
        }
    }
    function checkForm() {
        var username=$("#username").val();
        var nickname=$("#nickname").val();
        var sign=$("#sign").val();
        if(username==null||username==''||nickname==null||nickname==''||sign==null||sign==''){
            document.getElementById("msg").innerText="请完整填写所有信息";
            return false;
        }else{
            return true;
        }
    }
    function checkPassword() {
        //校验规则 正则表达式  只允许输入 数字跟字母
        var password=$("#password").val();
        if(password==null||password==''){
            document.getElementById("msg").innerText="密码不能为空";
            return false;
        }else if(password.length<7||password.length>15){
            alert(password.length);
            document.getElementById("msg").innerText="密码长度必须在7-15之间";
            return false;
        }else{
            var reg = /^[A-Za-z0-9]{7,15}$/;
            var flag=reg.test(password);
            if(!flag){
                document.getElementById("msg").innerText="密码只能由数字和字母组成";
                return false;
            }else{
                var r_password=$("#r_password").val();
                if(r_password==null|| !(r_password==password)){
                    document.getElementById("msg").innerText="两次密码不一致";
                    return false;
                 }else{
                    return true;
                }
            }
        }
    }
    function addUser() {
        var username=$("#username").val();
        var password=$("#password").val();
        var nickname=$("#nickname").val();
        var sign=$("#sign").val();
        $.post("${lyon}/onstage/addUser.do",{username:username,password:password,nickname:nickname,sign:sign},function (res) {
            if(res.success){
                window.location.href="${lyon}/onstage/userLogin.html";
            }else{
                document.getElementById("msg").innerText="注册账号失败";
            }
        },"json");
    }
</script>
<script src="${lyon}/static/assets/js/jquery.min.js"></script>
</body>
</html>
